blob: f527690e35445fb02de7b5f3d9bdef213c5f1d35 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
|
<script lang="ts" context="module">
import { ApiClient } from "$lib/api_client";
export async function load({ params, fetch }) {
const apiClient = new ApiClient(fetch);
const botName = params["bot_name"];
const { bot, owner } = await apiClient.get(`/api/bots/${botName}`);
return {
props: {
bot,
owner,
},
};
}
</script>
<script lang="ts">
import NavTab from "$lib/components/NavTab.svelte";
import { currentUser } from "$lib/stores/current_user";
export let bot;
export let owner;
</script>
<svelte:head>
<title>{bot["name"]}</title>
</svelte:head>
<div class="header">
<div class="header-title-line">
<h1 class="bot-name">{bot["name"]}</h1>
{#if owner}
<span class="title-line-owner">
by
<a class="owner-name" href="/users/{owner['username']}">
{owner["username"]}
</a>
</span>
{/if}
</div>
<div class="bot-tabs">
<NavTab href={`/bots/${bot.name}`}>index</NavTab>
<NavTab href={`/bots/${bot.name}/matches`}>matches</NavTab>
<NavTab href={`/bots/${bot.name}/stats`}>stats</NavTab>
{#if $currentUser && $currentUser["user_id"] === bot["owner_id"]}
<NavTab href={`/bots/${bot.name}/versions`}>versions</NavTab>
{/if}
</div>
</div>
<slot />
<style lang="scss">
.header {
padding: 0 16px;
border-bottom: 1px solid black;
}
.header-title-line {
display: flex;
align-items: baseline;
}
.title-line-owner {
padding: 0 16px;
color: #333;
}
$header-space-above-line: 12px;
.bot-name {
font-size: 24pt;
margin-bottom: $header-space-above-line;
}
.owner-name {
font-size: 14pt;
// font-weight: 600;
text-decoration: none;
color: black;
margin-bottom: $header-space-above-line;
}
.bot-tabs {
display: flex;
}
</style>
|
